<template>
	<view class="header">
		<view class="search">
			<image src="../../static/tabBar/搜索，猫客.png"></image>
			<swiper class="iptSwiper" circular="true" vertical="true"  :autoplay="true" :interval="1500" :duration="1000">
				<swiper-item class="swiper-item" v-for="(item,index) in swiperList" :key="index">
					<view >{{item}}</view>
				</swiper-item>
			</swiper>
		</view>
		<image class="msgImg" src="../../static/tabBar/211铃铛-线性.png"></image>
		<image v-if="avatarUrl" class="avatar" :src="avatarUrl" @click="toCenter"></image>
		<image v-else class="avatar" src="../../static/tabBar/avatar.png" @click="toLogin"></image>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				swiperList:["猛鬼宿舍","原神","王者荣耀","明日方舟","蝴蝶忍天下第一"]
			}
		},
		methods:{
			// 转跳到登陆页面
			toLogin(){
				uni.navigateTo({
					url:'/pages/login/login'
				})
			},
			// 转跳到个人中心页面
			toCenter(){
				uni.navigateTo({
					url:'/pages/center/center'
				})
			}
		},
		computed:{
			avatarUrl(){
				return uni.getStorageSync('userInfo_key').avatarUrl
			}
			
		}

	}
</script>

<style lang="stylus">
.header
	margin 0 32rpx
	display flex
	width calc(100vw - 64rpx)
	height 104rpx
	align-items center
	justify-content space-between
	.search
		display flex
		height 40rpx
		width 490rpx
		padding 16rpx
		background-color #f5f7f8
		align-items center
		border-radius 84rpx
		// overflow hidden
		image
			width 40rpx
			height 40rpx
		.iptSwiper
			width 440rpx
			height 72rpx
			margin-left 12rpx
			.swiper-item
				height 72rpx
				line-height 72rpx
				font-size 32rpx
				color #868c92
			
	image
		width 50rpx
		height 50rpx
		border-radius 50%

</style>
